<template>
  <div class="home">
    <div class="home-top">
      <span>欢迎使用《问卷调查》实时采集</span>

      <el-dropdown class="home-top-avatar" @command="handleCommand">
        <img src="@/assets/avatar.png" />
        <!-- <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span> -->
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="role === '管理员' || role === '代理'" command="/data">数据主页</el-dropdown-item>
          <el-dropdown-item v-if="role === '管理员' || role === '代理'" command="/dataUser">人工筛选</el-dropdown-item>
          <el-dropdown-item v-if="role === '管理员' || role === '代理'" command="/user">用户管理</el-dropdown-item>
          <el-dropdown-item command="/dataAdmin">数据查看</el-dropdown-item>
          <el-dropdown-item command="login">退出登录</el-dropdown-item>
          <!-- <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item> -->
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <el-dialog title="添加用户" width="500px" :visible.sync="addUserdialogFormVisible">
      <el-form :rules="rules" :model="AddUserForm" label-width="auto" ref="AddUserForm">
        <el-form-item label="用户名" label-width="auto" prop="userName">
          <el-input placeholder="请输入用户名" style="width: 230px" v-model="AddUserForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="expressDate" label="过期时间" value-format-="yyyy-MM-dd" label-width="auto">
          <el-date-picker v-model="AddUserForm.expressDate" type="date" style="width: 230px" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="密码" label-width="auto" prop="password">
          <el-input placeholder="请输入密码" style="width: 230px" v-model="AddUserForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" label-width="auto" prop="password1">
          <el-input placeholder="请确认密码" style="width: 230px" v-model="AddUserForm.password1" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addUser('AddUserForm')">提交</el-button>
          <el-button @click="resetForm('AddUserForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- <el-container >
      <el-aside :width="isCollapse ? '56px': '150px'" style="border: 1px solid #eee">

        <el-menu style="height:100vh">
          <div class="home-top">
            <img src="../assets/login-logo.png"/>
            <span>问卷调查</span>
          </div>
          <el-menu-item index="1" @click="close()"><i class="el-icon-s-fold"></i><span style="padding-left: 7px">折叠</span></el-menu-item>
          <el-menu-item index="2" @click="Goto('/data')"><i class="el-icon-search"></i><span style="padding-left: 7px">数据查询</span></el-menu-item>
          <el-submenu index="1" v-if="role === '管理员'">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span style="padding-left: 7px">用户管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="Goto('/user')">
                <span style="padding-left: 16px">用户查看</span>
              </el-menu-item>
              <el-menu-item index="1-2" @click="Goto('/dataAdmin')">
                <span style="padding-left: 16px">数据查看</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-dialog title="添加用户" width="500px" :visible.sync="addUserdialogFormVisible">
        <el-form :rules="rules" :model="AddUserForm" label-width="auto" ref="AddUserForm">
          <el-form-item label="用户名"  label-width="auto" prop="userName">
            <el-input placeholder="请输入用户名" style="width: 230px" v-model="AddUserForm.userName"></el-input>
          </el-form-item>
          <el-form-item prop="expressDate" label="过期时间" value-format-="yyyy-MM-dd" label-width="auto">
            <el-date-picker
                v-model="AddUserForm.expressDate"
                type="date"
                style="width: 230px"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="密码" label-width="auto" prop="password">
            <el-input placeholder="请输入密码" style="width: 230px" v-model="AddUserForm.password" show-password></el-input>
          </el-form-item>
          <el-form-item label="确认密码" label-width="auto" prop="password1">
            <el-input placeholder="请确认密码" style="width: 230px" v-model="AddUserForm.password1" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addUser('AddUserForm')">提交</el-button>
            <el-button @click="resetForm('AddUserForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-container>
        <el-header style="text-align: right; font-size: 12px;height:52px;border-bottom:1px solid #eee;">
          <el-button type="primary" size='mini' @click="logout()">退出登录</el-button>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>

      </el-container>
    </el-container> -->
    <div class="home-middle">
      <router-view />
    </div>
    <div class="home-bottom">
      <span>Copyright 版权所有 sscj.vip</span>
      <span>All Rights Reserved</span>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      const confirmPassword = (rule, value, callback) => {
        if (value !== this.AddUserForm.password) {
          callback(new Error('密码与第一次输入不一致!'))
        }
        callback()
      }
      return {
        role: '',
        rules: {
          expressDate: [{ required: true, message: '请选择过期时间' }],
          userName: [{ required: true, message: '用户名不能为空' }],
          password: [{ required: true, message: '请输入密码' }],
          password1: [{ required: true, message: '确认密码' },
          { validator: confirmPassword, trigger: 'blur' }
          ],
        },
        AddUserForm: {
          password: ''
        },
        addUserdialogFormVisible: false,
        hi: document.documentElement.clientHeight,
        keyword: '', // 关键词
        tixing: false,
        isCollapse: false,
        tableData: [{
          id: '12987122',
          content: '晚上好，我已经看到我周围的许多社区在经济上挣扎，并想创建解决方案。 我正在与一些投资者进行会谈，如果您可以接受不到一分钟的调查，将不胜感激。 向他们展示这些数据将有助于结束交易，并希望使其成为现实，因此没有人必须陷入困境。 如果您进行调查，您将被输入以赢得25美元的亚马逊礼品卡。 谢谢！ （请不要确定垃圾邮件，并且没有资格获胜。没有双重条目）',
          // content: '寻找带有中学儿童的父母奖金，赚取$ 50，sv_5osuqrgywymjc1e……',
          source: '推特',
          tuijian: '普通',
          fadate: '2022-09-01 05:51:18',
          caidate: '2022-09-01 05:51:18',
          oldcontent: 'Good Evening, I have seen many in the communities around me struggle financially and wanted to create a solution. I’m in talks with a few investors and would appreciate it if you could please take this survey that is less than a minute. Showing them this data will help in closing a deal and hopefully, making it a reality so no one has to be stuck in a difficult situation. If you take the survey you will be entered to win a $25 Amazon gift card. Thank you! (Please no spam as it is identified and not eligible to win. No double entries) ',
          link: 'https://www.facebook.com/100007013945206/posts/5464287840322178'
        }
        ]
      }
    },
    methods: {
      logout () {

      },
      handleCommand (e) {
        if (e === 'login') {
          window.sessionStorage.clear()
          this.$router.push(e)
        }
        else {
          this.$router.push(e)
        }

      },
      addUser (e) {
        this.$refs[e].validate((valid) => {

          if (valid) {
            this.axios.post(this.baseUrl + 'user/addUser', this.AddUserForm)
              .then(res => {
                var data = res.data
                console.log(data)
                if (data.code !== 200) {
                  this.$message.error(data.msg);
                } else {
                  this.$message.success(data.msg);
                }
                this.$refs[e].resetFields();
                this.addUserdialogFormVisible = false
              })
              .catch(err => {
                console.log(err)
              })
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields();
        this.addUserdialogFormVisible = false
      },
      showDi () {
        this.addUserdialogFormVisible = !this.addUserdialogFormVisible
      },
      Goto (e) {
        this.$router.push(e);
      },
      close () {
        this.isCollapse = !this.isCollapse
      },

    }
    , created () {
      this.role = window.sessionStorage.getItem('role')
        this.timer = setInterval(() => {
          // 发送在线信息1分钟一次
          this.axios.get(this.baseUrl + 'user/addTime')
              .then(res => {
                console.log(res)
              })
  }, 60000)
    }
  };
</script>
<style>
  .home {
    color: #666;

    height: 100vh;
    /* font-weight: 600; */
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .home-top {
    /* position: absolute;
   top: 0;
   left: 0; */
    background: #1ABC9C;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    border-radius: 20px 20px 0 0;
    position: relative;
  }

  .home-top-avatar {
    cursor: pointer;
    position: absolute;
    right: 35px;
    top: 5px;
  }

  .home-top-avatar img {
    width: 30px;
    height: 30px;
  }

  .home-middle {

    /* position: absolute;
   top: 40px;
   left: 0; */
    width: 100%;
    height: calc(100% - 80px);
  }

  .home-bottom {
    /* position: absolute;
   bottom:0;
   left: 0; */
    background: #1ABC9C;
    width: 100%;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 13px;
    border-radius: 0 0 20px 20px;
    font-size: 12px;
  }


  .el-header {
    /* background-color: #B3C0D1; */
    color: #333;
    line-height: 60px;
  }

  .el-menu {
    border: none;
    /* background-color: rgb(238, 241, 246) */
  }

  .el-aside {
    color: #333;
  }

  .el-submenu__icon-arrow {
    display: none;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

  /* .home-top{
  display: flex;
  align-items: center;

  padding: 10px;
  border-bottom: 1px solid #eee;
}
.home-top >img{
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.home-top >span{
  color:#03B4F5;
} */
</style>
